<template>
	<view class="profile">
		<form>
		<view class="personal">个人信息</view>
		<view class="box">
			<view class="uname">
				<label>姓名</label>
				<input type="text" placeholder="请输入真实姓名" placeholder-class="placehoderstyle"></input>
			</view>
			<view class="number">
				<label>身份证号码</label>
				<input type="number"  placeholder="请输入身份证号码" placeholder-class="placehoderstyle"></input>
			</view>
			<view class="QQ">
				<label>QQ</label>
				<input type="number" placeholder="请输入联系QQ号" placeholder-class="placehoderstyle"></input>
			</view>
			<view class="education">
				<label>学历</label>
				<picker @change="educationchange" :range="education">
					<view :class="educationStyle==0?'pickerStyle':''">{{educationTitle}} </view>
				</picker>
			</view>
			<view class="merry">
				<label>婚姻状况</label>
				<picker @change="merrychange" :range="merry">
					<view  :class="merryStyle==0?'pickerStyle':''">{{merryTitle}} </view>
				</picker>
			</view>
			<view class="liabilities">
				<label>负债情况</label>
				<picker @change="liabilitieschange" :range="liabilities">
					<view  :class="liabilitiesStyle==0?'pickerStyle':''">{{liabilitiesTitle}} </view>
				</picker>
			</view>
		</view>
		
		<view class="quota">期望额度</view>
		<view class="box">
			<view class="hopequota">
				<label>期望额度</label>
				<picker @change="hopequotachange" :range="hopequota">
					<view  :class="hopequotaStyle==0?'pickerStyle':''">{{hopequotaTitle}} </view>
				</picker>
			</view>
		</view>
		
		<view class="company">公司信息</view>
		<view class="box">
			<view class="companyname">
				<label>公司名称</label>
				<input type="text" placeholder="请输入公司名称" placeholder-class="placehoderstyle"></input>
			</view>
			<view class="trade">
				<label>所属行业</label>
				<input type="text" placeholder="请输入所属行业" placeholder-class="placehoderstyle"></input>
			</view>
			<view class="information">
				<label>职业信息</label>
				<input type="text" placeholder="请输入职业信息" placeholder-class="placehoderstyle"></input>
			</view>
			<view class="income">
				<label>月收入</label>
				<input type="text" placeholder="请输入月收入" placeholder-class="placehoderstyle"></input>
			</view>
		</view>
		
		<view class="adressInformation">居住信息</view>
		<view class="box">
			<view class="adressData">
				<label>居住状况</label>
				<picker @change="adressDatachange" :range="adressData">
					<view  :class="adressDatastyle==0?'pickerStyle':''">{{adressDataTitle}} </view>
				</picker>
			</view>
			<view class="area">
				<label>居住地区</label>
				<picker mode = region @change="areaHandel">
					<view class="pickerStyle">{{areaTitle}} </view>
				</picker>
			</view>
			<view class="adress">
				<label>居住地址</label>
				<input type="text" placeholder="请输入居住地址" placeholder-class="placehoderstyle"></input>
			</view>
		</view>
		
		<button form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	export default {
		data (){
			return{
			educationStyle:0,
			merryStyle:0,
			liabilitiesStyle:0,
			hopequotaStyle:0,
			adressDatastyle:0,
			textValue:'',
			educationTitle:'请选择学历',
			education:['初中','高中','大专','本科'],
			educationIndex:0,
			merryTitle:'请选择婚姻状况',
			merry:['已婚','未婚'],
			merryIndex:0,
			liabilitiesTitle:'请选择负债情况',
			liabilities:[10000,50000,100000,200000],
			liabilitiesIndex:0,
			hopequotaTitle:'请选择期望额度',
			hopequota:[10000,50000,100000,200000],
			hopequotaIndex:0,
			adressDataTitle:'请选择居住状况',
			adressData:[],
			adressDataIndex:0,
			areaTitle:"请选择居住地区",
			areaArry:[]
		};},
		methods:{
			// idNumber(){
			// 	let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			// 	// let reg=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
			// 	if(!reg.test(this.textValue)&& this.textValue.length>18){
			// 		console.log(e,111111111);
			// 		this.textValue=''
			// 	}
			// },
			educationchange(e){
				this.educationIndex=e.detail.value
				this.educationTitle = this.education[this.educationIndex]
				this.educationStyle=1
			},
			merrychange(e){
				this.merryIndex=e.detail.value
				this.merryTitle=this.merry[this.merryIndex]
				this.merryStyle=1
			},
			liabilitieschange(e){
				this.liabilitiesIndex=e.detail.value
				this.liabilitiesTitle=this.liabilities[this.liabilitiesIndex]
				this.liabilitiesStyle=1
			},
			hopequotachange(e){
				this.hopequotaIndex=e.detail.value
				this.hopequotaTitle=this.hopequota[this.hopequotaIndex]
				this.hopequotaStyle=1
			},
			adressDatachange(e){
				this.adressDataIndex=e.detail.value
				this.adressDataTitle=this.adressData[this.adressDataIndex]
				this.adressDatastyle=1
			},
			areaHandel(e){
				this.areaArry=e.detail.value
				this.areaTitle=this.areaArry
			}
		}
	}
</script>

<style scoped>
	.profile{
		overflow: hidden;
	}
	
	.placehoderstyle{
		text-align: right;
	}
	.personal,
	.quota,
	.company,
	.adressInformation{
		width: 100%;
		height: 88rpx;
		background-color: #FBEAE1;
		color: #666666;
		text-align: left;
		line-height: 88rpx;
		padding-left: 40rpx;
		font-size: 28rpx;
	}
	.uname,.number,.QQ,.education,.merry,.liabilities,.hopequota,
	.companyname,
	.trade,
	.information,
	.income,
	.adressData,
	.adress,
	.area{
		display: flex;
		width: 100%;
		height: 100rpx;
		color: #3C3C3C;
		font-size: 32rpx;
		line-height: 100rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #eee;
	}
	.uname label,
	.number label,
	.QQ label,
	.education label,
	.merry label,
	.liabilities label,
	.hopequota label,
	.companyname label,
	.trade label,
	.information label,
	.income label,
	.adressData label,
	.adress label,
	.area label{
		flex: 2;
	}
	.uname input,
	.number input,
	.QQ input,
	.education picker,
	.merry picker,
	.liabilities picker,
	.hopequota picker,
	.companyname input,
	.trade input,
	.information input,
	.income input,
	.adressData picker,
	.adress input,
	.area picker{
		flex: 6;
		height: 100rpx;
	}
	.uname input,
	.number input,
	.QQ input,
	.companyname input,
	.trade input,
	.information input,
	.income input,
	.adress input{
		margin-right: 70rpx;
	}
	button{
		width: 702rpx;
		height: 94rpx;
		background-color: #ED7D6B;
		color: #fff;
		border-radius: 10rpx;
		font-size: 36rpx;
		margin-top: 34rpx;
		margin-bottom: 50rpx;
	}
	.education picker,
	.merry picker,
	.liabilities picker,
	.hopequota picker,
	.adressData picker,
	.area picker{
		position: relative;
	}
	.education picker view::before,
	.merry picker view::before,
	.liabilities picker view::before,
	.hopequota picker view::before,
	.adressData picker view::before,
	.area picker view::before{
		content: '';
		position: absolute;
		top: 32rpx;
		right: 70rpx;
		background: url(../../static/img/右箭头灰色_6x10_@2x.png) no-repeat center;
		width: 30rpx;
		height: 30rpx;
	}
	.placehoderstyle{
		text-align: right;
	}
</style>
